// 函数防抖：  
//     前端开发过程中，有一些事件，例如：onresize，scroll，mousemove ,mousehover 等，
//     会被频繁触发（短时间内多次触发），不做限制的话，有可能一秒之内执行几十次、几百次，
//     如果在这些函数内部还执行了其他函数，尤其是执行了dom函数，不仅浪费计算机资源，还会降低
//     程序运行速度。
// 原理： 利用setTimeout来辅助实现，延迟运行需要执行的代码，如果方法多次触发，则把上次记录的延迟执行
// 代码用clearTimeout清掉，重新开始计时


export const debounce = (func,wait=1000) =>{
    let timeout = null;
    return function(){
        if(timeout){
            clearTimeout()
        }
        timeout = setTimeout(() =>{
            func.apply(this,arguments)
        },wait)
    }   
}  

// 函数节流：
//     概念：限制一个函数在一定时间内只能执行一次     
// 通过setTimeout 定时器，通过设置延迟时间，先设定一个变量，然后把定时器赋值给这个
// 变量，再写入需要执行的函数  ，第二次执行这个函数时，判断变量是否为true，true则返回，
// 直到函数运行完成后将变量重置为null，再进行第二次执行       
export const debounce1 = (func,wait=1000) => {
    let timer = null;
    return function(){
        if(!timer){
            timer = setTimeout(()=>{
                func.apply(this,arguments);
                timer = null;
            },wait)
        }
    }
}

// 运用场景：
//     - 懒加载 滚动加载、加载更多或监听滚动条位置   
//     - 百度搜索框   
//     - 防止高频点击提交，防止表单重复提交  

// 函数防抖和节流的区别：
//     防抖：触发高频事件n秒内函数只会执行一次，如果n秒内高频事件再次被触发，时间会重新
//     计算   
//     节流：高频事件n秒内函数只会执行一次，n秒内高频事件再次被触发，不会重新计算时间
//     会等函数执行完后才会执行第二次   